<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/layout' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>邮件管理</el-breadcrumb-item>
      <el-breadcrumb-item>发送邮件</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片布局 -->
    <el-card>
      <el-form title="手动发送邮件" ref="formRules" :model="form" :rules="formRules" label-width="150px"
               label-position="left" style="width: 60%">
        <el-form-item label="收件人" prop="toUser">
          <el-autocomplete
              highlight-first-item
              fit-input-width
              v-model="form.username"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入收件人名称"
              @select="handleSelect"
              value-key="username"
              :clearable="true"
              @blur="form.username===''?form.toMail='':form.toMail"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="收件邮箱" prop="toMail">
          <el-input v-model="form.toMail" disabled placeholder="请输入收件人邮箱"></el-input>
        </el-form-item>
        <el-form-item label="主题" prop="subject">
          <el-input v-model="form.subject" placeholder="请输入邮件主题"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input type="textarea" :rows="3" v-model="form.content" placeholder="请输入邮件内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-row>
            <el-col :span="24">
              <el-button type="primary" @click="sendEmail('formRules')" class="send-btn">发送</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>

import {getNameAndEmail} from "@/api/user";
import {ElMessage} from "element-plus";
import {sendMail} from "@/api/mail";

export default {
  data() {
    return {
      form: {
        username: '',
        toMail: '',
        subject: '',
        content: ''
      },

      restaurants: [],
      timeout: null,

      firstInto: true,

      formRules: {
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        toMail: [{required: true, message: '此用户似乎没有绑定邮箱', trigger: 'blur'}],
        subject: [{required: true, message: '必须指定邮件主题！', trigger: 'blur'}],
        content: [{required: true, message: '必须输入邮件内容！', trigger: 'blur'}],
      }
    }
  },
  methods: {
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      if (!this.firstInto && restaurants.length <= 1) {
        cb(restaurants)
        this.firstInto = false
        return
      }
      const data = {
        page: 1,
        limit: 10,
        params: {username: queryString}
      }
      getNameAndEmail(data).then(resp => {
        restaurants = resp.rows;
        this.loading = false;
        this.restaurants = restaurants
        cb(restaurants);
      })
    },
    handleSelect(item) {
      if (item) {
        this.form.toMail = item.email
      } else {
        this.form.toMail = ''
      }
    },
    sendEmail(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          sendMail(this.form).then(resp=>{
            if (resp.success){
              ElMessage.success("发送邮件成功")
            }
          })
        } else {
          ElMessage.warning('请正确填写表单！');
        }
      });
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
div.el-breadcrumb {
  height: 45px;
}

.el-dialog__body {
  padding: 0px 15px;
}


</style>